/*
 * Tencent is pleased to support the open source community by making TKEStack
 * available.
 *
 * Copyright (C) 2012-2021 Tencent. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 * this file except in compliance with the License. You may obtain a copy of the
 * License at
 *
 * https://opensource.org/licenses/Apache-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OF ANY KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations under the License.
 */
import * as React from 'react';
import { connect } from 'react-redux';

import { SearchBox, Table } from '@tea/component';
import { bindActionCreators } from '@tencent/ff-redux';
import { t, Trans } from '@tencent/tea-app/lib/i18n';
import { Justify } from '@tencent/tea-component/lib/justify';

import { allActions } from '../actions';
import { RootProps } from './PersistentEventApp';

const mapDispatchToProps = dispatch =>
  Object.assign({}, bindActionCreators({ actions: allActions }, dispatch), { dispatch });

@connect(state => state, mapDispatchToProps)
export class ClusterActionPanel extends React.Component<RootProps, {}> {
  render() {
    let { actions, cluster } = this.props;

    return (
      <Table.ActionPanel>
        <Justify
          left={<React.Fragment />}
          right={
            <SearchBox
              value={cluster.query.keyword || ''}
              onChange={actions.cluster.changeKeyword}
              onSearch={actions.cluster.performSearch}
              onClear={() => {
                actions.cluster.performSearch('');
              }}
              placeholder={t('请输入集群ID')}
            />
          }
        />
      </Table.ActionPanel>
    );
  }
}
